<template>
    <div >

           <div class="mk_zhuche"> <h1>注册</h1></div> 
         <div class="mk_huming">
          <b>用户名</b> <input type="text" v-model="user.username" placeholder="请输入"  @blur="checkUser">
            <div v-show="user.username"><p v-if="!check_user">用户名重复</p><p v-else>可以注册</p></div>
        </div>
        <div class="mk_mima">
           <p> <b>密码</b> <input type="text" v-model="user.pass" placeholder="请输入密码"></p>
          <!-- <div v-show="user.pass"><p v-if="check_user">mima</p><p v-else>恭喜你可以注册</p></div> -->
        </div>
         
       <button @click="register" class="mk_data">注册</button>
    </div>
</template>

<script>
import $ from "jquery";
    export default {
        data(){
            return{
                user:{
                    username:"",
                    pass:""
                },
                check_user:true,
                userList:[]
            }
        },
        methods:{
            register(){
                // let _this = this
                if(this.check_user){
                    $.ajax({
                        type:"post",
                        url:"http://192.168.225.45:3000/users",
                        data:{
                            username:this.user.username,
                            pass:this.user.pass
                        },
                        success:function(res){
                            // console.log(res,"res")
                            //  console.log(_this)
                            res = this.res
                            alert("注册成功")
                        }
                    })
                }
            },
            checkUser(){
                $.ajax({
                     type:"get",
                    url:"http://192.168.225.45:3000/users",
                    data:{username:this.user.username},
                    success:res=>{
                        if(res.length==0){
                            this.check_user = true
                        }else{
                            this.check_user=false
                            console.log(1)
                        }
                    }
                })
            },
            getUser(){
                $.ajax({
                    type:"get",
                    url:"http://192.168.225.45:3000/users",
                    success:res=>{
                        this.userList = res
                    }
                })
            }
        }
    }
</script>

<style scoped>
.mk_data{
    width: 40%;
    margin-left: 130px;
    margin-top: 40px;
    /* margin: 20px 35%; */
    text-align: center;
}
.mk_zhuche{
    width: 100%;
    text-align: center;
}
.mk_huming{
    height: 30px;
    margin-top: 20px;
    width: 100%;
    text-align: center;
    /* border-bottom:1px solid #000 ; */
}
.mk_mima{
    width: 100%;
    margin-top: 20px;
    text-align: center;
}
.mk_mima b{
    margin-right: 15px;
}
.mk_huming input{
    border: 0;
    border-bottom:1px solid #000 ;
    outline: 0;
}
.mk_mima input{
      border: 0;
    border-bottom:1px solid #000 ;
    outline: 0;
}
</style>